<template>
    <div class="system-header">
        <div class="logo" @click="$router.push('/')">
            <img :src="require('@/assets/images/logo.png')" />
            后台管理系统
        </div>
        <div class="header-center" v-if="setting.showTopNav">
            <div class="top-nav">
                <div
                    class="item"
                    v-for="(item, index) in topNavList"
                    :key="index"
                    @click="handleTopNav(item)"
                    :class="{ active: $route.path === item.path }"
                >{{ item.name }}</div>
            </div>
        </div>
        <div class="header-right">
            <el-tooltip content="源码地址">
                <a class="icon-btn" href="https://gitee.com/argeo/vms-simple" target="_blank">
                    <img :src="require('@/assets/images/gitee.png')" />
                </a>
            </el-tooltip>
            <el-tooltip :content="fullscreen ? '取消全屏' : '全屏'">
                <div class="icon-btn" @click="handleFullScreen">
                    <i v-if="fullscreen" class="el-icon-c-scale-to-original"></i>
                    <i v-else class="el-icon-full-screen"></i>
                </div>
            </el-tooltip>
            <el-dropdown trigger="hover" @command="handleCommand" size="medium">
                <div class="user-avatar">
                    <img v-if="userInfo.avatar" :src="imgPrefix + userInfo.avatar" />
                    <img v-else :src="require('@/assets/images/default-avatar.png')" />
                    {{userInfo.nickname}}
                    <i class="el-icon-caret-bottom"></i>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="/user/info">用户资料</el-dropdown-item>
                        <el-dropdown-item command="/user/password">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'system-header',
        data () {
            return {
                topNavList: [
                    { name: '控制台', path: '/dashboard' },
                    { name: '示例页', path: '/#/demo', target: '_blank' },
                    { name: '外链', path: 'https://www.baidu.com/', target: '_blank' }
                ],
                fullscreen: false,
                imgPrefix: process.env.VUE_APP_imgPrefix
            }
        },
        computed: {
            setting () {
                return this.$store.state.common.setting
            },
            userInfo () {
                return this.$store.state.user.info
            }
        },
        methods: {
            handleTopNav (item) {
                if (item.target === '_blank') {
                    window.open(item.path)
                } else {
                    this.$router.push({ path: item.path })
                }
            },
            // 用户名下拉菜单选择事件
            handleCommand (command) {
                if (command === 'logout') {
                    this.$store.commit('SET_STATE_CLEAR')
                    this.$router.push('/login')
                } else {
                    this.$router.push(command)
                }
            },
            // 全屏事件
            handleFullScreen () {
                const element = document.documentElement
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen()
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen()
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen()
                    }
                }
                this.fullscreen = !this.fullscreen
            }
        }
    }
</script>
<style lang="scss">
.system-header {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    overflow: hidden;

    .logo {
        font-size: 22px;
        cursor: pointer;
        color: #409EFF;

        img {
            width: 40px;
            vertical-align: text-bottom;
            margin-right: 15px;
        }
    }

    .header-center {
        .top-nav {
            display: flex;
            align-items: center;

            .item {
                padding: 4px 15px;
                border-radius: 15px;
                cursor: pointer;
                color: #666;
                font-size: 16px;
                margin-right: 15px;

                &:last-child {
                    margin-right: 0;
                }

                &:hover {
                    background: #e5e5e5;
                }

                &.active {
                    color: #409EFF;
                    background: #e5e5e5;
                }
            }
        }
    }

    .header-right {
        display: flex;
        align-items: center;

        .icon-btn {
            width: 30px;
            height: 30px;
            margin-right: 15px;
            font-size: 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            i {
                font-size: 20px;
            }

            img {
                width: 20px;
            }
        }

        .user-avatar {
            color: #666;
            cursor: pointer;
            display: inline-flex;
            align-items: center;

            img {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                box-shadow: 0 0 8px 0 #999;
                background: #fff;
                margin-right: 10px;
            }

            .el-icon-caret-bottom {
                margin-left: 10px;
            }
        }
    }
}
</style>
